<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理</title>
    <style>
        .box {
            width: 1000px;
            margin: auto;
        }

        h1 {
            margin-top: 50px;
        }

        .tj {
            background-color: #529acb;
            width: 60px;
            height: 40px;
            color: white;
            border-radius: 10px;
            border: none;
            float: right;
            margin-top: -65px;
        }

        th,
        td {
            width: 200px;
            height: 30px;
            text-align: center;
            border-bottom: 2px solid #f4f4f4;
        }

        th {
            background-color: #939ca7;
            color: white;

        }

        .sc {
            color: #ff0000;
            margin-right: 10px;
        }

        .bj {
            color: #85d4f2;
            margin-left: 10px;
        }

        .mtk {
            width: 300px;
            height: 300px;
            margin: auto;
            position: fixed;
            left: 0;
            right: 0;
            background-color: white;
            z-index: 11;
            display: none;
        }

        .zzc {
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 10;
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>图书管理</h1><button class="tj">+添加</button>
        <table cellspacing="0">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>1</td>
                    <td>论持久战</td>
                    <td>毛泽东</td>
                    <td>新华社</td>
                    <td>
                        <span class="sc">删除</span>
                        <span class="bj">编辑</span>
                    </td>
                </tr> -->
            </tbody>
        </table>
        <div class="mtk">
            <h3>添加图书</h3>
            <h4>作者</h4>
            <input type="text" class="zz" placeholder="请输入作者">
            <h4>书名</h4>
            <input type="text" class="sm" placeholder="请输入书籍名称">
            <h4>出版社</h4>
            <input type="text" class="cbs" placeholder="请输入出版社名称"><br><br>
            <button class="qx">取消</button> &nbsp;<button class="bc">保存</button>
        </div>
        <div class="zzc"></div>
    </div>
</body>

</html>
<script src="./lib/axios.min.js"></script>
<script>
    var creator = 'daqwed'
    var box = document.querySelector('.box')
    var tbody = document.querySelector('tbody')
    var tj = document.querySelector('.tj')
    var mtk = document.querySelector('.mtk')
    var zzc = document.querySelector('.zzc')
    var sm = document.querySelector('.sm')
    var cbs = document.querySelector('.cbs')
    var zz = document.querySelector('.zz')
    function render() {
        axios.get(`https://hmajax.itheima.net/api/books?creator=${creator}`).then(res => {
            console.log(res.data.data);
            var dataStr = res.data.data;
            var strArr = dataStr.map((ele, index) => {
                return `
                <tr data-id="${ele.id}">
                    <td>${index + 1}</td>
                    <td>${ele.bookname}</td>
                    <td>${ele.author}</td>
                    <td>${ele.publisher}</td>
                    <td>
                        <span class="sc" onclick="del(${ele.id})">删除</span>
                        <span class="bj">编辑</span>
                    </td>
                </tr>
                `
            }).join('')
            tbody.innerHTML = strArr

        })
    }
    render()
    box.addEventListener('click', function (e) {
        if (e.target.className == 'tj') {
            mtk.style.display = 'block'
            zzc.style.display = 'block'
        }
        if (e.target.className == 'qx') {
            mtk.style.display = 'none'
            zzc.style.display = 'none'
        }
        if (e.target.className == 'bc') {
            if (sm.value.trim() != '' && cbs.value.trim() != '') {

                var data1 = JSON.stringify({
                    "bookname": sm.value,
                    "author": zz.value,
                    "publisher": cbs.value,
                    "creator": creator
                });

                var config = {
                    method: 'post',
                    url: 'https://hmajax.itheima.net/api/books',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    data: data1
                };

                axios(config)
                    .then(function (response) {
                        console.log(JSON.stringify(response.data));
                        mtk.style.display = 'none'
                        zzc.style.display = 'none'
                        render()
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            } else {
                alert('不允许为空！！')
                return
            }
        }
        if (e.target.className == 'bj') {
            var id = e.target.parentNode.parentNode.dataset.id
            axios.get(`https://hmajax.itheima.net/api/books/${id}`).then(res => {
                var dataStr = res.data.data;
                console.log(dataStr);
                zz.value=dataStr.author;
                cbs.value=dataStr.publisher;
                sm.value=dataStr.bookname
                mtk.style.display = 'block'
                zzc.style.display = 'block'
                del(id)
            })
        }
    })
    function del(aa){
        console.log(aa);
        axios.delete(`https://hmajax.itheima.net/api/books/${aa}`).then(res => {})
            
    }
</script>